<!-- -->
<template>
  <div class="searchTable">
    <!-- <el-card class="box-card"> -->
    <div class="searchBox">
      <div class="search-item" v-for="(item,idx) in page" :key="idx">
        <!-- <p>{{item.lable || ''}}</p> -->
        <!-- 组件类型 判断是下拉框还是输入框 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="searchData[item.value]"
          :placeholder="item.placeholder|| '请选择'"
        >
          <el-option
            v-for="item in item.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-input
          v-if="item.type === 'input'"
          v-model="searchData[item.value]"
          :placeholder="item.placeholder|| '请输入内容'"
        ></el-input>

        <!-- 省市区 -->
        <div v-if="item.type === 'city'" class="address-box">
          <!-- 省 -->
          <el-select
            v-model="searchData[item.value.province]"
            :placeholder="item.placeholder|| '请选择'"
            @change="changeProvince"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>

          <!-- 市 -->
          <el-select
            v-model="searchData[item.value.city]"
            :placeholder="item.placeholder|| '请选择'"
            @change="changeCity"
          >
            <el-option
              v-for="item in cityList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>

          <!-- 区 -->

          <el-select
            v-model="searchData[item.value.area]"
            @change="searchList"
            :placeholder="item.placeholder|| '请选择'"
          >
            <el-option
              v-for="item in areaList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item searchBtn">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="danger" @click="reast">重置</el-button>
      </div>
    </div>

    <!-- </el-card> -->
  </div>
</template>

<script>
import {
  getOneCifyData,
  getTwoCifyData,
  searchLiveList,
  searchHouseCityList
} from "@/api";
import { log } from "util";
export default {
  props: {
    page: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => {}
    }
  },
  // import引入到组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      searchData: {},
      provinceList: [], // 省
      cityList: [], // 市
      areaList: [] // 区
    };
  },
  // 监听属性 类似于data概念
  computed: {},

  // 方法集合
  methods: {
    search() {
      this.$emit("search", this.searchData);
    },
    reast() {
      this.searchData = {};
      this.$emit("reast");
    },
    getOneCifyData() {
      // 省
      getOneCifyData({ level: 1 }).then(res => {
        this.provinceList = res.data;
      });
    },
    // 根据省的code前三位去找 二级城市
    changeProvince(e) {
      console.log(e, "省");
      getTwoCifyData({ level: 2, code: e / 1000 }).then(res => {
        // 渲染市
        this.cityList = res.data;
      });
    },
    // 渲染区县
    changeCity(e) {
      // let arr = this.cityList.filter(item => item.code.includes(e));
      if (e) {
        let a = JSON.stringify(e).slice(0, 4);
        getTwoCifyData({ level: 3, code: a * 1 }).then(res => {
          console.log(res.data);
          this.areaList = res.data;
        });
      }
    },
    searchList(e) {
      console.log(e);
      searchHouseCityList({ code: e }).then(res => {
        console.log(res);
        this.$emit("cityData", res.data);
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    // 获取地址
    this.getOneCifyData();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang='scss'  scoped>
.box-card {
  display: flex;
  flex-direction: column;
}
.searchBox {
  display: flex;
  align-items: center;
  overflow-y: auto;
}
.search-item:nth-child(1) {
  margin-left: 0;
}
.search-item {
  // width: 25%;
  flex: 1;
  margin-left: 10px;
  p {
    margin-bottom: 10px;
    height: 20px;
  }
}
.searchBtn {
  display: flex;
  justify-content: flex-end;
  // padding-top: 20px;
}
.el-select {
  width: 100%;
}

.address-box {
  display: flex;

  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  ::v-deep .el-input__inner {
    border: 0;
  }
}
</style>
